import React, { useState } from "react";

const AddTask = ({ onAdd }) => {
  const [text, setText] = useState("");
  const [day, setDay] = useState("");
  const [important, setImportant] = useState(false);

  const onSubmit = (e) => {
    e.preventDefault();

    if (!text) {
      alert("任务不能为空");
      return;
    }

    onAdd({ text, day, important });
    setText("");
    setDay("");
    setImportant(false);
  };

  return (
    <div>
      <form className="add-form" onSubmit={onSubmit}>
        <div className="form-control">
          <label>任务</label>
          <input
            type="text"
            placeholder="添加任务"
            value={text}
            onChange={(e) => setText(e.target.value)}
          />
        </div>
        <div className="form-control">
          <label>日期</label>
          <input
            type="text"
            placeholder="日期"
            value={day}
            onChange={(e) => setDay(e.target.value)}
          />
        </div>
        <div className="form-control form-control-check">
          <label>重要</label>
          <input
            type="checkbox"
            checked={important}
            onChange={(e) => setImportant(e.currentTarget.checked)}
          />
        </div>
        <input
          type="submit"
          className="btn btn-block"
          value="保存任务"
          onClick={onSubmit}
        />
      </form>
    </div>
  );
};

export default AddTask;
